<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  // 数组解构赋值  和 对象解构赋值
  // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

  // 传统的写法
  // var obj = {
  //     a:1,
  //     b:2,
  //     c:3
  // }
  // var a = obj.a;
  // var b = obj.b;
  // var c = obj.c;

  // var name = zhang.name


  // ES6对象解构

  // 1. 对应键名解构  (不分先后)
  var zhang = {
    name: "张三",
    class: "2108",
    age: 18,
    sex: "男",
    say: function () {
      console.log(this.name, this.age);
    }
  }
  // var {name,age,sex,say} = zhang;

  // 等价于
  // var {name:name,age:age,sex:sex,say:say} = zhang;
  // console.log(name,age,sex,say);


  // 2. 自定义变量名 (如果变量名已被使用 或者是 关键词)

  var { name: a, age: b, sex: c, say: d, class: e } = zhang;

  console.log('bo' + a, b, c, d, e);


  // 解构过程中,如果解构不成功则默认undefined
  var { a, b, c, d } = { a: 1, b: 2, c: 3 }
  // console.log(a,b,c,d);

  // 解构过程中,可以给变量设置默认值
  var { a, b, c, d = 0 } = { a: 1, b: 2, c: 3 }
  // d = d == undefined ? 0 : d
  // console.log(a,b,c,d);



  // 对象解构练习
  const node = {
    loc: {
      start: {
        line: 1,
        column: 5
      }
    }
  };

  var { loc: loc } = node;  // loc: {start:{line:1,column:5}}
  var { start } = loc;  // start:{line:1,column:5}
  var { line, column } = start;  // line:1,column:5
  console.log(line, column);

  // 如果对对象进行二次解构,需要对应键名解构键值
  var { loc: { start: { line, column } } } = node;
  var {
    loc: {
      start: {
        line,
        column
      }
    }
  } = node;











</script>

</html>